<template>
    <a-form
        ref="formRef"
        :label-col="{ style: { width: '90px' } }"
        :model="formValue">
        <a-form-item
            v-for="item in formItems"
            :key="item.dataIndex"
            :label="item.label"
            :name="item.dataIndex">
            <a-input
                v-if="item.type == 'input'"
                @input="(e) => updateVaule(item.dataIndex, e.target.value)"
                :value="formValue[item.dataIndex]" />
        </a-form-item>
    </a-form>
</template>

<script setup>
import { toRefs, ref, watch, computed } from 'vue'
import { Form as aForm, Input as AInput } from 'ant-design-vue'
import { useForm, useModal } from '@/hooks'
const emit = defineEmits(['ok', 'update:formValue'])
const { formItems = [], formValue } = defineProps({
    formItems: {},
    formValue: {},
})
const { formRef, formRules, resetForm } = useForm()
const updateVaule = (key, val) => {
    emit('update:formValue', { ...formValue, [key]: val })
}
/**
 * 确定
 */
function getFormData() {
    formRef.value
        .validateFields()
        .then(async (values) => {
            console.log('values', values)
        })
        .catch(() => {})
}

defineExpose({ getFormData, resetForm })
</script>

<style lang="less" scoped></style>
